<template>
  <!-- 

  nav 传 collapse 属性 给 Hamburger

  点击 Hamburger 图标，触发事件，nav 数据， 修改 el-menu 的 闭合

  -->

  <!-- 
  
    :class="{ 'rotate-180': collapse }" 控制旋转
  
  
  -->
  <div class="hamburger-container">
    <svg-icon
      icon-name="ant-design:bars-outlined"
      custom-class="hamburger"
      :class="{ 'rotate-180': collapse }"
      @click="handleClick"
    />
  </div>
</template>

<script lang="ts" setup>
const { collapse } = defineProps({
  collapse: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits<{ (e: "toggleCollapse"): void }>()
const handleClick = () => {
  emit("toggleCollapse")
}
</script>
<style scoped lang="scss">
/* 
hover:(bg-black/5) 滑动伪类
hover:(bg-black/5) 鼠标
*/
.hamburger-container {
  @apply leading-[50px] float-left cursor-pointer px-10px hover:(bg-black/5);
}
.hamburger {
  @apply w-30px h-30px transition-transform duration-300;
}
</style>
